<template>
  <view class="my-container page-background">
    <!-- 用户信息卡片 -->
    <view class="user-info">
      <u-avatar :src="src" mode="circle" size="120" class="avatar"></u-avatar>
      <u-text class="username" type="primary" :text="userInfo.IP||'未知'"></u-text>
      <u-text
        class="username"
        type="primary"
        :text="
          userInfo.address.city ||
          userInfo.address.province ||
          userInfo.address.country ||
          '未知'
        "
      ></u-text>
    </view>

    <view class="my-setting">
      <view class="setting-card">
        <u-cell-group class="setting-group">
          <u-cell-item
          @click="toDownload"
            :icon-style="{ color: '#3fcec6' }"
            icon="download"
            title="我的下载"
            :value="downloadCount"
            :arrow="true"
            :border="false"
          ></u-cell-item>
          <u-cell-item
            @click="toRating"
            icon="star-fill"
            title="我的评分"
            :icon-style="{ color: '#3fcec6' }"
            :value="ratingCount"
            :arrow="true"
            :border="false"
          ></u-cell-item>
          <u-cell-item
            class="contact-cell"
            icon="server-man"
            title="联系客服"
            :icon-style="{ color: '#3fcec6' }"
            :arrow="true"
            :border="false"
          >
            <button class="contact-btn" open-type="contact"></button>
          </u-cell-item>
        </u-cell-group>
      </view>

      <view class="setting-card">
        <u-cell-group class="setting-group">
          <u-cell-item
            @click="toNotice"
            :icon-style="{ color: '#3fcec6' }"
            icon="bell-fill"
            title="订阅更新"
            :arrow="true"
            :border="false"
          ></u-cell-item>
          <u-cell-item
            @click="toNotice"
            :icon-style="{ color: '#3fcec6' }"
            icon="question-circle-fill"
            title="常见问题"
            :arrow="true"
            :border="false"
          ></u-cell-item>
          <u-cell-item
            :icon-style="{ color: '#3fcec6' }"
            @click="isModelShow = true"
            icon="zhuanfa"
            title="每日梗图"
            :arrow="true"
            :border="false"
          ></u-cell-item>
        </u-cell-group>
      </view>
    </view>
    <!-- 开发中！！！ -->
     <u-modal v-model="isModelShow" :content="content">
     </u-modal>
  </view>
</template>

<script setup>
import { useDownloadStore } from '@/stores/download';
import { useRatingStore } from '@/stores/rating';
import { getUserInfoAPI } from '@/api/home.js';
import { onReady } from '@dcloudio/uni-app';
import { $u } from 'uview-pro';
import { reactive, ref, computed } from 'vue';

// 开发中！！！
const isModelShow = ref(false);
const content = ref('开发中！！！');

const src = ref('https://fanblog.top/images/avatar.png');
const userInfo = reactive({
  IP: '127.0.0.1',
  address: {
    country: '',
    province: '',
    city: '',
  },
});

// 安全地初始化stores
const downloadStore = useDownloadStore();
const ratingStore = useRatingStore();

// 计算下载数量，添加安全检查
const downloadCount = computed(() => {
    return downloadStore?.downloadList?.length || 0;
  });
  
  const ratingCount = computed(() => {
    return ratingStore?.ratingList?.length || 0;
  });

const getUserInfo = async () => {
  try {
    let res = await getUserInfoAPI();
    userInfo.IP = res.data.IP;
    userInfo.address = { ...res.data.address };
  } catch {
    $u.toast('获取用户信息失败');
  }
};

const toNotice = () => {
  uni.navigateTo({
    url: '/pages/notice/index',
  });
};

const toDownload = () => {
  uni.navigateTo({
    url: '/pages/download/index',
  });
};

const toRating = () => {
  uni.navigateTo({
    url: '/pages/rating/index',
  });
};

onReady(() => {
  getUserInfo();
});
</script>

<style scoped lang="scss">
  @import '@/common/style/page-background.scss';
  .my-container {
    padding: 40rpx 30rpx;
  }

  .user-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60rpx 40rpx;
    margin-bottom: 40rpx;
  }

  .avatar {
    margin-bottom: 32rpx;
    transition: all 0.3s ease;
  }

  .avatar:hover {
    transform: scale(1.05);
  }

  .username {
    font-size: 40rpx;
    font-weight: 600;
    margin-bottom: 16rpx;
    letter-spacing: 0.5rpx;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .user-id {
    font-size: 28rpx;
    color: #7f8c8d;
    font-weight: 400;
    background: rgba(127, 140, 141, 0.1);
    padding: 8rpx 20rpx;
    border-radius: 20rpx;
    border: 1rpx solid rgba(127, 140, 141, 0.2);
  }

  .my-setting {
    display: flex;
    flex-direction: column;
    gap: 30rpx;
  }

  .setting-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 24rpx;
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06),
      0 2rpx 6rpx rgba(0, 0, 0, 0.02);
    backdrop-filter: blur(8rpx);
    border: 1rpx solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
  }

  .setting-group {
    padding: 20rpx 0;
  }

  ::v-deep .u-cell {
    padding: 32rpx 40rpx !important;
    min-height: 120rpx !important;
    transition: all 0.2s ease;

    &:not(:last-child) {
      border-bottom: 1rpx solid rgba(236, 240, 241, 0.8) !important;
    }

    &:active {
      background: rgba(63, 206, 198, 0.05) !important;
    }
  }

  ::v-deep .u-cell__title-text {
    font-size: 32rpx !important;
    color: #2c3e50 !important;
    font-weight: 500 !important;
  }

  ::v-deep .u-cell__value {
    font-size: 30rpx !important;
    color: #7f8c8d !important;
    font-weight: 400 !important;
  }

  ::v-deep .u-cell__left-icon-wrap {
    margin-right: 24rpx !important;
  }

  ::v-deep .u-cell__right-icon-wrap {
    margin-left: 12rpx !important;

    .u-icon {
      color: #bdc3c7 !important;
    }
  }

  // 联系客服按钮样式
  .contact-cell {
    position: relative !important;
  }

  .contact-btn {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    border: none !important;
    opacity: 0 !important;
    z-index: 10 !important;
    cursor: pointer !important;
  }
</style>
